import React from 'react';
import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import {SwipeListView} from 'react-native-swipe-list-view';
import {Theme} from '@react-navigation/native';
// @ts-ignore
import android from './Resource/android.png';
// @ts-ignore
import iphone from './Resource/iphone.png';

export enum DeviceAuthDevicePlatform {
  android,
  iphone,
}

export type DeviceAuthItem = {
  id: any;
  deviceName: string;
  platform: DeviceAuthDevicePlatform; // 0为android, 1为iOS
  lastUseTime: string;
};

export type DeviceAuthI18nTextType = {
  delBtn: string;
};

export type DeviceAuthListViewType = {
  title?: string;
  items: DeviceAuthItem[];
  i18nText?: DeviceAuthI18nTextType;
  confirm: (item: DeviceAuthItem) => void;
  styles?: any;
  theme: Theme;
};

const DeviceAuthListView: React.FC<DeviceAuthListViewType> = props => {
  const {
    items,
    title,
    i18nText,
    styles = deviceAuthStyles,
    theme,
    confirm,
  } = props;
  return (
    <View style={[deviceAuthStyles.container, styles.container]}>
      <Text
        style={[
          {color: theme.colors.text},
          deviceAuthStyles.titleText,
          styles.titleText,
        ]}>
        {title ||
          '你的账号在以下设备中登陆过，你可以删除设备，删除后该设备登陆时需要进行安全验证。'}
      </Text>
      <SwipeListView
        data={items}
        showsVerticalScrollIndicator={false}
        disableRightSwipe
        useFlatList={false}
        closeOnRowPress={true}
        closeOnRowBeginSwipe={true}
        closeOnScroll={true}
        useNativeDriver={false}
        renderItem={({item}) => (
          <View
            style={[
              {backgroundColor: theme.colors.background},
              deviceAuthStyles.content,
              styles.content,
            ]}>
            {DeviceAuthDevicePlatform.android === item.platform ? (
              <Image
                style={[deviceAuthStyles.imageSize, styles.imageSize]}
                source={android}
              />
            ) : (
              <Image
                style={[deviceAuthStyles.imageSize, styles.imageSize]}
                source={iphone}
              />
            )}
            <View style={[deviceAuthStyles.textViews, styles.textViews]}>
              <Text
                style={[
                  {color: theme.colors.text},
                  deviceAuthStyles.textView,
                  styles.textView,
                ]}>
                {item.deviceName}
              </Text>
              <Text
                style={[
                  {color: theme.colors.text},
                  deviceAuthStyles.textView,
                  styles.textView,
                ]}>
                {item.lastUseTime}
              </Text>
            </View>
          </View>
        )}
        renderHiddenItem={({item}) => (
          <View style={[deviceAuthStyles.rowBack, styles.rowBack]}>
            <View />
            <View>
              <TouchableOpacity
                style={[deviceAuthStyles.touchable, styles.touchable]}
                onPress={() => confirm(item)}>
                <Text
                  style={[
                    {color: theme.colors.text},
                    deviceAuthStyles.delText,
                    styles.delText,
                  ]}>
                  {i18nText?.delBtn || '删除'}
                </Text>
              </TouchableOpacity>
            </View>
          </View>
        )}
        rightOpenValue={-75}
      />
    </View>
  );
};
export default DeviceAuthListView;
const deviceAuthStyles = StyleSheet.create({
  container: {
    flex: 1,
    paddingLeft: 2,
    paddingRight: 2,
  },
  titleText: {
    fontSize: 14,
  },
  imageSize: {
    width: 35,
    height: 60,
  },
  content: {
    flexDirection: 'row', // 设置为水平布局
    alignItems: 'center',
    paddingVertical: 10,
    paddingHorizontal: 10,
  },
  textView: {
    fontSize: 13,
    marginBottom: 5,
  },
  textViews: {
    paddingHorizontal: 10,
  },
  rowBack: {
    flex: 1,
    backgroundColor: '#ad0404',
    alignItems: 'center',
    justifyContent: 'space-between',
    flexDirection: 'row',
  },
  delText: {
    color: '#ffffff',
    fontSize: 14,
    letterSpacing: 3,
  },
  touchable: {
    flex: 1,
    padding: 20,
    marginTop: 5,
    marginBottom: 5,
  },
});
